<script setup>
import {computed,defineProps,defineEmits,ref} from 'vue'
let props=defineProps({
    modelValue:{
        default:()=>false
    },
    colorOn:{
        type:String,
        default:()=>'var(--color-theme)'
    },
    colorOff:{
        type:String,
        default:()=>'var(--color-text-light-first)'
    }
})
let emits=defineEmits(['update:modelValue'])
let value=ref(props.modelValue)
let backgroundColor=computed(()=>{
    if(value.value){
        return `background-color:${props.colorOn}`
    }else{
        return `background-color:${props.colorOff}`
    }
})
let position=computed(()=>{
    if(!value.value){
        return `left:0em;background-color:${props.colorOn}`
    }else{
        return `left:1em;background-color:${props.colorOff}`
    }
})
function switchValue(e){
    value.value=!value.value
    emits('update:modelValue',value.value)
}
</script>

<template>
    <!-- <div> -->
        <span class="box" :style="backgroundColor" @click="switchValue()">
            <span class="circle" :style="position">
                <slot name="before" v-if="value"></slot>
                <slot name="after" v-else></slot>
            </span>
        </span>
    <!-- </div> -->
</template>

<style scoped>
.box{
    display: inline-block;
    position: relative;
    width: 2em;
    height: 1em;
    border-radius: 3em;
    border: .2em solid var(--color-theme);
    transition: all .3s;
    vertical-align: center;
}
.circle{
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 1em;
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>